<template>
<el-container class="main">
  <el-header height="60" class="target-contain">
    <index-header @func="setLoginCard">
      <template v-slot:logo>
        <el-image
            :src="logoUrl"
            :fit="'fill'"
            class="iconImg"></el-image>
      </template>
        <template v-slot:functions>
        <div class="funcs">
          <el-row>
            <el-col :span="4">
              <div class="function"><router-link to="/index/home">首页</router-link></div>
            </el-col>
            <el-col :span="4">
              <div class="function"><router-link to="/index/team">医疗团队</router-link></div>
            </el-col>
            <el-col :span="4">
              <div class="function"><router-link to="/index/introduce">医院介绍</router-link></div>
            </el-col>
            <el-col :span="4">
              <div class="function"><router-link to="/index/news">新闻通知</router-link></div>
            </el-col>
            <el-col :span="4">
              <div class="function"><router-link to="/index/feedback">反馈建议</router-link></div>
            </el-col>
            <el-col :span="4">
              <div class="function"><router-link to="/login">员工平台</router-link></div>
            </el-col>
          </el-row>
        </div>
      </template>
      <template v-slot:avatar_slot>
        <div class="avatarInfo">
          <el-space direction="vertical" :size="4">
            <el-button type="text" @click="go2Private"  class="content hvr-push">个人信息</el-button>
            <el-button @click="go2Info" type="text" class="content hvr-push">消息中心</el-button>
            <el-button  type="text" class="contentLast hvr-push"  @click="logout">退出登录</el-button>
          </el-space>
        </div>
      </template>
    </index-header>
    <transition name="el-zoom-in-top" mode="out-in">
      <div v-show="loginCardShow" class="loginCard">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>登录窗口</span>
              <el-button class="button" type="text" @click="closeCard" icon="el-icon-close" style='font-size: 20px'/>
            </div>
          </template>
          <div class="body-card">
            <div class="login-contain">
              <el-tabs v-model='loginCate' @tab-click="handleSwitch">
                <el-tab-pane label="密码登录" name="password">
                  <el-form label-width="80px" :model="loginForm" label-position="center" class="my-form" >
                    <el-form-item label="账户" >
                      <el-input type="text" v-model="loginForm.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" >
                      <el-input type="password" v-model="loginForm.password"></el-input>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>

<!--                <el-tab-pane label="手机登录" name="mobile">
                  <el-form label-width="80px" :model="mobileForm" label-position="center" class="my-form">
                    <el-form-item label="手机" >
                      <el-input type="text" v-model="mobileForm.mobile"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" >
                      <el-input type="text" v-model="mobileForm.code"></el-input>
                      <code-btn class="code-contain" :span_text="span_text" :counter.sync="counter" :icon="btnIcon" :loginCate="loginCate"></code-btn>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>

                <el-tab-pane label="邮箱登录" name="email">
                  <el-form label-width="80px" :model="emailForm" label-position="center" class="my-form">
                    <el-form-item label="邮箱" >
                        <el-input type="text" v-model="emailForm.email"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" >
                        <el-input type="password" v-model="emailForm.code"></el-input>
                        <code-btn class="code-contain" :span_text="span_text" :icon="btnIcon"  :counter.sync="counter" :loginCate="loginCate"></code-btn>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>-->

              </el-tabs>
            </div>
            <div class="btn-contain">
              <el-button type="primary" @click="login">确认</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </transition>
  </el-header>
  <el-main>
    <transition name="show_anime" appear>
      <router-view></router-view>
    </transition>
  </el-main>
  <el-footer>
    <el-divider></el-divider>
    <index-footer>
      <template v-slot:logo>
        <el-image
            v-on:click="clickLogo"
            @dblclick="go2Special"
            :src="logoUrl"
            fit="fill"
            class="logoImg"></el-image>
      </template>
    </index-footer>
  </el-footer>
</el-container>

</template>

<script>
import indexHeader from '../../components/index-header.vue'
import serviceTemplate from '../../components/ServiceTemplate.vue'
import doctorTemplate from '../../components/DoctorCardTemplate.vue'
import indexFooter from '../../components/index-footer.vue'
import codeBtn from '../../components/GetCodeButton.vue'
import {logout, userLogin} from '../../api/api'
import {ElMessage, ElMessageBox} from "element-plus";


export default {
  name: "Index",
  components:{indexHeader,serviceTemplate,doctorTemplate,indexFooter,codeBtn},

  beforeRouteEnter(to, from, next) {
    // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
    document.querySelector('body').setAttribute('style', 'margin:0;padding:0;')
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 去除背景色
    document.querySelector('body').setAttribute('style', '')
    next()
  },
  mounted() {

    this.currentRoute = this.$route.path
    const me = JSON.parse(localStorage.getItem("me"))
    if (me!=null){
      if (me.name === null||me.idno===null){
        ElMessageBox.confirm(
            '检测到您的信息还未完善，是否前往完善个人信息?',
            '提示',
            {
              confirmButtonText:'确认',
              cancelButtonText: '暂不完善',
              type: 'warning',
              center: true
            }
        )
            .then(()=>{
              this.$router.push('/user/private')
            })
            .catch(()=>{
              ElMessage.info({
                type: 'info',
                message: '取消跳转'
              })
              this.$router.push('/index/home')
            })
      }
    }

    if (this.$store.state.user.me !== null){
      if(typeof(WebSocket) === "undefined"){
        alert("您的浏览器不支持socket")
      }else{
        // 实例化socket
        this.socket = new WebSocket(this.path+this.$store.state.user.me.id)
        // 监听socket连接
        this.socket.onopen = this.open
        // 监听socket错误信息
        this.socket.onerror = this.error
        // 监听socket消息
        this.socket.onmessage = this.getMessage
      }
    }
  },
  data(){
    return{
      path:'ws://119.23.73.128:80/imserver/',
      //path: 'ws://localhost/imserver/',
      logoUrl:'https://gitee.com/Kolvzaki/pics/raw/master/img/logo.png',
      counter:3,
      btnDis:false,
      span_text:'获取验证码',
      btnIcon:'el-icon-s-promotion',
      mobileForm:{
        mobile:'',
        code:'',
      },
      emailForm:{
        email:'',
        code:'',
      },
      loginCate:'password',
      loginForm:{
        username:'',
        password:'',
        code:'',
      },
      loginCardShow: false,
    }
  },
  methods:{

    go2Special(){
      window.location.href = 'http://127.0.0.1:8080'
    },

    go2Private(){
      this.$router.push('/user/private')
    },

    go2Info(){
      this.$router.push('/user/infoCenter')
    },

    login(){
      if(this.loginCate==='password'){
        userLogin(this.loginForm).then(res=>{

          if(res.ret === "0"){

            //先存入storage,token作为是否登录的判断依据
            localStorage.setItem(res.tokenName,res.tokenValue)
            localStorage.setItem("me",JSON.stringify(res.user))


            //再改变store中登录状态
            this.$store.dispatch('user/setStatus',true)
            this.$store.dispatch('user/setMe',res.user)

            ElMessage.success({
              message: res.description,
              type: 'success'
            })
            this.loginCardShow = false

            if(typeof(WebSocket) === "undefined"){
              alert("您的浏览器不支持socket")
            }else{
              // 实例化socket
              this.socket = new WebSocket(this.path+res.user.id)
              // 监听socket连接
              this.socket.onopen = this.open
              // 监听socket错误信息
              this.socket.onerror = this.error
              // 监听socket消息
              this.socket.onmessage = this.getMessage
            }
          }
          else{
            ElMessage.error({
              message: res.description,
              type: 'error'
            })
          }
        })
        .catch(err=>{
          console.log(err)
        })
      }else if (this.loginCate === 'mobile'){

      }else{

      }

    },
    handleSwitch(tab,event){
      //console.log(this.loginCate)
    },
    closeCard: function (){
      this.loginCardShow=false
    },
    showIt: function (){
      console.log(this.loginCardShow)
    },

    /*
    * 走马灯的点击事件，暂无实现
    * */
    clickImage(){
      alert('img')
    },
    clickLogo(){
      this.$router.push('/index')
    },
    /*
    * 登出，请求登出接口，然后刷新页面
    * */
    logout(){
      let key = localStorage.key(0)
      logout({},{
        key: localStorage.getItem(key)
      }).then(res=>{
        if(res.ret === '0'){
          ElMessage.success({
            type:'success',
            message: '登出成功',
          })
          //更改状态，并清空storage中的数据
          this.$store.dispatch('user/setStatus',false)
          localStorage.clear()
          this.$router.push('/index/home')
        }else{
          ElMessage.warning({
            type: 'warning',
            message: '登出错误，请重试'
          })
        }
      })
      .catch(err=>{
        ElMessage.error({
          type: 'error',
          message: '登出失败，请重试'
        })
      })
    },

    setLoginCard: function (msg){
      this.loginCardShow = msg
    },
    open: function () {
      console.log("socket连接成功")
    },
    error: function () {
      console.log("连接错误")
    },
    getMessage: function (msg) {
      console.log(msg)
    },
    send: function(params) {
      this.socket.send(params)
    },
    close: function () {
      console.log("socket已经关闭")
    },
    destroyed(){
      this.socket.onclose= this.close
    }
  }
}
</script>

<style scoped>

.index_contain{
  position: relative;
  width: 100%;
  height: 100%;
  background: #d9ecff;
}

.show_anime-enter-active{
  animation: slideInRight 0.25s linear;
}

.show_anime-leave-active{
  animation: slideOutLeft 0.25s linear;
}


.code-contain{
  position: absolute;
  left: 230px;
  bottom: 0;
}
::v-deep(.el-tabs__active-bar){
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  -webkit-box-direction: normal;
  color: rgb(48, 49, 51);
  white-space: nowrap;
  position: absolute;
  bottom: 0;
  height: 3px;
  background-color: rgba(64, 158, 255,0.8);
  z-index: 1;
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s, -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
  list-style: none;
  width: 70px !important;
  transform: translateX(0px);
}
::v-deep(.el-tabs__nav){
  float: none;
}
.my-form{
  margin-top: 30px;
  margin-right: 30px;
}
::v-deep(.el-tabs__header){
  margin: 0 100px 15px;
}
::v-deep(.el-form-item__label){
  text-align: center;
  letter-spacing: 0.15em;
  font-size: 18px;
}
.body-card{

}
.card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.box-card{
  position: fixed;
  width: 500px;
  height: 400px;
}
.loginCard{
  position: fixed;
  left: 35%;
  top: 20%;
  z-index:100;
}
.contentLast{
  border-bottom: none;
  width: 150px;
  margin-left: 25px;
  padding-bottom: 10px;
  font-size: 16px;
  color: #000;
  transition: all ease 0.5s;
}
.contentLast:hover{
  color: #00a4ff;
}


.main{
  position: relative;
  width: 1536px;
  height: 100%;
  background:url('https://gitee.com/Kolvzaki/pics/raw/master/img/background.jpg') 0 / cover fixed no-repeat;
}


.avatarInfo{
}

.content {
  width: 150px;

  margin-left: 25px;
  padding-bottom: 10px;
  border-bottom: #c0c4cc 1px solid;
  font-size: 16px;
  color: #000000;
  transition: all 0.5s ease;
}

.content:hover{
  color: #00a4ff;
}

.logoImg{
  cursor: pointer;
}

.card-body .service{
  margin-top: 25px;
  cursor: pointer;
}

.card-header {
  display: flex;
  align-items: center;
}

.funcs{
  height: 30px;
}
.funcs a{
  text-decoration: none;
  color: #f4f4f5;
  font-size: 20px;
  transition: 0.5s ease-out;
}

.funcs a:hover{
  color: red;
}

.function{
  border-right: 2px solid #343a40;
}



</style>
